<template>


       <el-dialog
         title="高管单位-数据授权"
         :visible.sync="CxoDialogVisible"
         :lock-scroll='false'
         @open='sendAjax'
          >
            <div class="cxo-table" ref='tables'>
                <ul>
                    <li>
                        <div><el-checkbox @change='changeAllChose' v-model='allChose'></el-checkbox></div>
                        <div>单位名称</div>
                        <div>人事信息</div>
                        <div>薪酬信息</div>
                    </li>
                   <li v-for='(k,i) in res'>
                        <div>
                          <label 
                            class='label' 
                            @click='changeFirstLabel(i)'
                            >
                          </label>
                        </div>
                        <div>
                          <span>{{k.c_lea_unit_name}}</span>
                        </div>
                        <div>
                            <label 
                                class='label' 
                                @click='changeClass'
                                :data-personnel='k.personnel'
                                :data-index = 'i+1'
                                >
                            </label>
                            </div>
                        <div>
                            <label 
                                class="label" 
                                @click='changeClass'
                                :data-pay='k.pay'
                                :data-index = 'i+1'
                              >
                            </label>
                        </div>
                   </li>
               
                   
                </ul>                  
            </div> 
             <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save">保 存</el-button>
                <el-button @click="changeVisible">取 消</el-button>
             </span>
        </el-dialog> 
</template>

<script>
import Vue from 'vue'
import { Checkbox, Button, Dialog, Message } from 'element-ui'
import URL from '@/common/js/adminUrl'

Vue.use(Checkbox)
Vue.use(Button)
Vue.use(Dialog)
export default {
	data () {
		return {
			res: '',
			allChose: '',
			CxoDialogVisible: false,
			identify: '',
			saveFlag: false,
			setid: ''
		}
	},
	created () {
		Bus.$on('高管单位授权', data => (this.CxoDialogVisible = data.cxo))
		Bus.$on('identify', data => (this.identify = data))
		Bus.$on('setid', data => (this.setid = data))
	},

	methods: {
		sendAjax () {
			this.Axios
				.Post(this.URL.unitAuth.url + '?identify=' + this.identify + '&roleSetid=' + this.setid, {})
				.then(res => {


					return new Promise((reslove) => {
						let datas = res.data.datas
						this.res = datas.allUnit
						this.res.forEach((ele, i) => {
							this.res[i].pay = false
							this.res[i].personnel = false
						})
						reslove(datas)
					}).then((datas) => {

						if (datas.CheckUnit) {
							datas.CheckUnit.forEach((ele, i) => {
								if (datas.CheckUnit[i].pay) {
									this.res.forEach((ele, k) => {
										if (
											this.res[k].c_leader_unit == datas.CheckUnit[i].exunit_id
										) {
											this.res[k].pay = datas.CheckUnit[i].pay
										}
									})
								}

								if (datas.CheckUnit[i].personnel) {
									this.res.forEach((ele, k) => {
										if (
											this.res[k].c_leader_unit == datas.CheckUnit[i].exunit_id
										) {
											this.res[k].personnel = datas.CheckUnit[i].personnel
										}
									})
								}
							}, this)
						}

						if (this.$refs.tables) {
							//先获取所有label,并把去除它们的选中效果
							let allLabel = this.$refs.tables.querySelectorAll('label')


							for (let i = 0; i < allLabel.length; i++) {
								allLabel[i].classList.remove('selected')
							}

							// 获取所有li
							let lis = this.$refs.tables.children[0].children

							for (let i = 0; i < this.res.length; i++) {
								if (this.res[i].pay) {
									lis[i + 1].children[3].children[0].classList.add('selected')
								}

								if (this.res[i].personnel) {
									lis[i + 1].children[2].children[0].classList.add('selected')
								}
							}

							// 根据条件判断是否是 allchose  赋值为true
							this.handleChangeAll()
						}

					})


				})
		},
		changeAllChose () {
			let table = this.$refs.tables.querySelectorAll('label')
			let styles = this.allChose ? 'label selected' : 'label'
			for (let i = 1; i < table.length; i++) {
				table[i].className = styles
			}

			this.saveFlag = true
		},

		changeFirstLabel (i) {
			let labelList = this.$refs.tables.children[0].children[
				i + 1
			].querySelectorAll('label')

			labelList[0].className =
        labelList[0].className == 'label selected' ? 'label' : 'label selected'

			let styles =
        labelList[0].className == 'label selected' ? 'label selected' : 'label'

			for (let i = 1; i < labelList.length; i++) {
				labelList[i].className = styles
			}


			this.saveFlag = true

			this.handleChangeAll()
		},
		changeVisible () {
			this.saveFlag = false
			this.CxoDialogVisible = false
		},
		save () {
			// userId  => this.userId
			// exunitId   => c_lea_unit
			// personnel   => personnel
			// pay  => pay

			// 如果用户有操作 才发送 因为无操作时 选项选中状态不会改变


			if (this.saveFlag && this.$refs.tables) {

				// 搜索所有选项状态后发送
				let list = this.$refs.tables.children[0].children

				let payArr = []

				let personnelArr = []


				for (let i = 1; i < list.length; i++) {
					if (list[i].children[2].children[0].className == 'label selected') {
						personnelArr.push(1)
					} else {
						personnelArr.push(0)
					}
					if (list[i].children[3].children[0].className == 'label selected') {
						payArr.push(1)
					} else {
						payArr.push(0)
					}
				}

				let params = {
					identify: this.identify,
					roleSetid: this.setid,
					userUnits: []
				}



				this.res.forEach((ele, i) => {
					if (personnelArr[i] == 1 || payArr[i] == 1) {
						params.userUnits.push({
							exunitId: this.res[i].c_leader_unit,
							personnel: personnelArr[i] + '',
							pay: payArr[i] + ''
						})
					}
				})



				this.Axios.Post(this.URL.saveUnitAuth.url, params)
					.then(res => {
						if (res.data.message && res.data.message == '保存成功') {
							Message({
								message: '保存成功',
								type: 'success'
							})

						} else {
							Message({
								message: '保存失败',
								type: 'error'
							})
						}
					})
			}
			this.changeVisible()
		},
		changeClass (event) {

			let e = event ? event : window.event

			let target = e.target || e.srcElement

			let index = target.getAttribute('data-index')

			let labelList = this.$refs.tables.children[0].children[
				index
			].querySelectorAll('label')
			// 点击后改变当前class
			if (target.className == 'label selected') {
				target.className = 'label'
				labelList[0].className = 'label'
			} else {
				target.className = 'label selected'
			}

			// 根据当前选择   决定第一个label是否选中
			if (labelList[1].className == labelList[2].className) {
				labelList[0].className =
          labelList[1].className == 'label' ? 'label' : 'label selected'
			}
			this.saveFlag = true
			this.handleChangeAll()
		},

		handleChangeAll () {
			if (this.$refs.tables) {
				let flag = true
				let list = this.$refs.tables.children[0].children

				for (let i = 1; i < list.length; i++) {
					if (
						list[i].children[2].children[0].className == 'label' &&
            list[i].children[3].children[0].className == 'label'
					) {
						list[i].querySelectorAll('label')[0].className = 'label'
					} else if (
						list[i].children[2].children[0].className == 'label selected' &&
            list[i].children[3].children[0].className == 'label selected'
					) {
						list[i].querySelectorAll('label')[0].className = 'label selected'
					}
				}

				for (let i = 1; i < list.length; i++) {
					if (list[i].querySelectorAll('label')[0].className == 'label') {
						flag = false
					}
				}

				this.allChose = flag
			}
		}
	}
}
</script>

<style scoped>
.cxo-table li {
  display: flex;
}

.cxo-table li:first-of-type {
  background-color: #f5f5f6;
}

.cxo-table li div {
  padding: 12px 0 12px 12px;

  flex: 2;
}

.cxo-table li div:first-of-type {
  flex: 1;
}

.label {
  display: inline-block;
  position: relative;
  border: 1px solid #bfcbd9;
  border-radius: 4px;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  background-color: #fff;
  z-index: 1;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}

.selected {
  background-color: #20a0ff;
  border-color: #0190fe;
}

.selected::after {
  content: '\2714';
  color: #fff;
  position: absolute;
  left: 3px;
  top: -2px;
}
</style>